{% extends 'layout_panel.html' %}

{% block html_js_code %}
<script>
layui.use(function(){
  var $ = layui.$;
  var layer = layui.layer;
  var util = layui.util;
  var form = layui.form;

  util.on('lay-on', {
    iframe_select_folder: function(){
      layer.open({
        title:"选择文件/文件夹",
        type: 2,
        area: ['800px', '600px'],
        content: '{% url 'sharedkit:picker_file_dir' 'file' %}?path={{ startpath }}',
        fixed: false, // 不固定
        maxmin: true,
        shade: 0.5,
        shadeClose: false,
        btn: ['选中', '取消'],
        btnAlign: 'c',
        yes: function(index, layero){
          var iframeWin =  window[layero.find('iframe')[0]['name']];
          var elemMark = iframeWin.$('#picker_path');
          var value = elemMark.val();
          if($.trim(value) === '') return elemMark.focus();
          $('#id_file_path').val(value);
          layer.closeAll();
        }
      });
    },
    iframe_select_install_folder: function(){
      layer.open({
        title:"选择文件/文件夹",
        type: 2,
        area: ['800px', '600px'],
        content: '{% url 'sharedkit:picker_file_dir' 'dir' %}?path={{ startpath }}',
        fixed: false, // 不固定
        maxmin: true,
        shade: 0.5,
        shadeClose: false,
        btn: ['选中', '取消'],
        btnAlign: 'c',
        yes: function(index, layero){
          var iframeWin =  window[layero.find('iframe')[0]['name']];
          var elemMark = iframeWin.$('#picker_path');
          var value = elemMark.val();
          if($.trim(value) === '') return elemMark.focus();
          $('#id_install_dir').val(value);
          layer.closeAll();
        }
      });
    },
    install: function(){
        var isValidFilePath = form.validate('#id_file_path');
        var isValidInstallDir = form.validate('#id_install_dir');
        if (isValidFilePath && isValidInstallDir){
            var loadIndex = layer.msg('开始安装...', {icon: 16,shade: 0.6, time:0});
            $.ajax({
                    url: "{% url 'project_python:pycharm_install_run' %}",
                    type: 'post',
                    data:{
                        'file_path': $('#id_file_path').val(),
                        'install_dir': $('#id_install_dir').val(),
                        'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                    },
                    dataType:'json',
                    success: function(response){                        
                        window.location.href = "{% url 'project_python:index' %}";
                    },
                    error: function(xhr, status, message) {
                        let errorMsg = '操作失败: ';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg += xhr.responseJSON.message;
                        } else {
                            errorMsg += message;
                        }
                        layer.alert(errorMsg, {icon: 2, title:null});
                    }
            })
        }
    }
  })
});
</script>
{% endblock %}

{% block page_content %}
{% include 'include_messages.html' %}
<div class="card">
<form method="post" class="layui-form">{% csrf_token %}
    <div class="card-body">
        
        <div class="form-group row">
            <label class="col-form-label">{{ form.file_path.label }}</label>
            <div class="input-group">
            {{ form.file_path }}
                <div class="input-group-append">
                <span class="input-group-text hand-cursor" lay-on="iframe_select_folder"><i class="fas fa-folder-open"></i></span>
                </div>
            </div>
            <span class="text-info">{{ form.file_path.help_text }}</span>
        </div>

        <div class="form-group row">
            <label class="col-form-label">{{ form.install_dir.label }}</label>
            <div class="input-group">
            {{ form.install_dir }}
                <div class="input-group-append">
                <span class="input-group-text hand-cursor" lay-on="iframe_select_install_folder"><i class="fas fa-folder-open"></i></span>
                </div>
            </div>
            <span class="text-info">{{ form.install_dir.help_text }}</span>
        </div>

    </div>
    <div class="card-footer">
         <button type="button" class="btn btn-primary" lay-on="install">开始安装</button>
    </div>
</form>
</div>
{% endblock %}